<script lang='ts' setup>
import GenFatForm from '../view/fat-form-create-view.vue'
import { View } from '@element-plus/icons-vue'
import { IFatForm, IFormConfig, IFormItem } from '../type'
import { ESizeUnit } from '../enum';
// TODO: 打开时未触发panel折叠
const props = defineProps<{
  config: IFatForm;
  show: boolean;
}>()
const emit = defineEmits<{
  (event: 'update:config', data: any): void
  (event: "update:show", data: boolean): void
}>()
const show = computed({
  get() { return props.show },
  set(val) { emit('update:show', val) }
})

function widthUnitChange() {
  if (props.config.formConfig.widthUnit === 'px') {
    props.config.formConfig.width = 1440
  } else {
    props.config.formConfig.width = 80
  }
}
</script>

<template>
  <el-drawer title="字段参数修改" v-model="show" direction="rtl" modal-class="drawer-model">
    <el-form-item label="表单名称" style="margin-right: 1rem;">
      <el-input v-model="config.formConfig.name" placeholder="" clearable style="width: 200px;"></el-input>
    </el-form-item>
    <el-form-item label="标签对齐" style="margin-right: 1rem;">
      <el-select v-model="config.formConfig.labelPosition">
        <el-option label="上方" value="top" />
        <el-option label="左侧" value="left" />
        <el-option label="右侧" value="right" />
      </el-select>
    </el-form-item>
    <el-form-item label="标签宽度" style="margin-right: 1rem;">
      <el-input-number v-model="config.formConfig.labelWidth" :min="22" :max="1780" :step="22" :controls="true"
        controls-position="right" style="width: 100px;" />
    </el-form-item>

    <el-form-item label="预览宽度" style="margin-right: 1rem;">
      <el-row :gutter="20">
        <el-col :span="12"><el-input-number v-model="config.formConfig.width"
            :min="config.formConfig.widthUnit === 'px' ? 200 : 20"
            :max="config.formConfig.widthUnit === 'px' ? 1980 : 100" :step="50" :controls="true" controls-position="right"
            style="width: 100px;" /></el-col>
        <el-col :span="12"> <el-select v-model='config.formConfig.widthUnit' @change="widthUnitChange" placeholder='请选择'
            clearable filterable style="width: 100px;">
            <el-option v-for='item in Object.entries(ESizeUnit)' :key='item[0]' :label='item[1]' :value='item[0]' />
          </el-select>
        </el-col>
      </el-row>


    </el-form-item>
  </el-drawer>
</template>

<style lang='scss' scoped>
:deep(.width-unit) {
  width: 40px;
  color: #333;
}
</style>